<template>
  <div class="wrapper-container" style="display: flex; flex-direction: column">
    <div class="search-container">
      <div class="search-container-left">
        <div
          class="search-container-item"
          v-for="(select, index) in selectList"
          :key="index"
        >
          <div v-if="select.type === 'select'" class="box">
            <span v-show="select.name">{{ select.name }}</span>

            <el-select
              v-model="select.val"
              style="width: 90px"
              size="mini"
              placeholder="请选择"
            >
              <el-option
                v-for="item in select.valList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="box" v-if="select.type === 'data'">
            <span class="demonstration" v-show="select.name">{{
              select.name
            }}</span>
            <el-date-picker
              v-model="select.val"
              type="date"
              placeholder="选择日期"
              prefix-icon="aaa"
            >
            </el-date-picker>
          </div>
          <div v-if="select.type === 'MultiSelect'" class="box"></div>
          <div v-if="select.type === 'btn'" class="box">
            <span class="demonstration" v-show="select.name">{{
              select.name
            }}</span>
            <el-input v-model="select.val" placeholder="请输入内容"></el-input>
          </div>
        </div>

        <div class="search-button">
          <img src="../../../assets/assessment/icon-search.png" alt="" />
          <span>查询</span>
        </div>
      </div>
    </div>
    <div class="table-container">
      <tablelistag
        :dataList="dataList"
        :colDataList="colDataList"
        :config="config"
      ></tablelistag>
    </div>
    <div class="bottom-block">
      <div class="export-button">
        <img src="../../../assets/assessment/icon-export.png" alt="" />
        <span>导出Excel</span>
      </div>
      <div class="text">授课教员名字后加“*”为课程负责人</div>
    </div>
    <div class="btn">
      <el-button
        native-type="submit"
        size="medium "
        type="warning"
        class="submit"
        v-show="this.record === 3"
        @click="choiceLink(4)"
        >授权</el-button
      >
    </div>
  </div>
</template>

<script>
import tablelistag from "@/views/comonents/tablelistag";
import ButtonItem from "../../../components/ButtonItem.vue";

export default {
  components: {
    tablelistag,
    ButtonItem,
  },
  name: "supervisonMain",
  data() {
    return {
      config: {
        mergeTarget: "id", // 通用依据
        combineProp: [
          // combineProp - 根据mergeTarge 进行合并的单元格属性
          "state",
          "data",
          "course",
          "system",
          "Section",
          "research",
          "course",
          "instructor",
          "examinationType",
          "method",
        ],
      },
      selectList: [
        {
          type: "select",
          name: "学期:",
          val: "2020春",
          valList: [
            {
              value: "2020春",
              label: "2020春",
            },
            {
              value: "2020夏",
              label: "2020夏",
            },
          ],
        },
        {
          type: "select",
          name: "批次:",
          val: "第一批",
          valList: [
            {
              value: "第一批",
              label: "第一批",
            },
            {
              value: "第二批",
              label: "第二批",
            },
          ],
        },
        {
          type: "select",
          name: "考试类型:",
          val: "补（缓）考",
          valList: [
            {
              value: "补（缓）考",
              label: "补（缓）考",
            },
            {
              value: "补（缓）考",
              label: "补（缓）考",
            },
          ],
        },
        {
          type: "data",
          name: "日期：",
          val: "",
        },
        {
          type: "select",
          name: "节次：",
          val: "1,2,3",
          valList: [
            {
              value: "1,2,3",
              label: "1,2,3",
            },
            {
              value: "4,5,6",
              label: "4,5,6",
            },
            {
              value: "7,8",
              label: "7,8",
            },
          ],
        },
        {
          type: "select",
          name: "课程负责单位：",
          val: "单位一",
          valList: [
            {
              value: "单位一",
              label: "单位一",
            },
            {
              value: "单位二",
              label: "单位二",
            },
            {
              value: "单位三",
              label: "单位三",
            },
          ],
        },
        {
          type: "select",
          name: "队别：",
          val: "一队",
          valList: [
            {
              value: "一队",
              label: "一队",
            },
            {
              value: "二队",
              label: "二队",
            },
            {
              value: "三队",
              label: "三队",
            },
          ],
        },
        {
          type: "select",
          name: "级次：",
          val: "2020级",
          valList: [
            {
              value: "2020级",
              label: "2020级",
            },
            {
              value: "2021级",
              label: "2021级",
            },
            {
              value: "2022级",
              label: "2022级",
            },
          ],
        },
        {
          type: "select",
          name: "专业班次：",
          val: "一班",
          valList: [
            {
              value: "一班",
              label: "一班",
            },
            {
              value: "二班",
              label: "二班",
            },
            {
              value: "三班",
              label: "三班",
            },
          ],
        },

        {
          type: "select",
          name: "人数：",
          val: "<20",
          valList: [
            {
              value: "<20",
              label: "<20",
            },
            {
              value: "20-50",
              label: "20-50",
            },
            {
              value: ">50",
              label: ">50",
            },
          ],
        },
        {
          type: "btn",
          name: "课程名称：",
          val: "",
        },
        {
          type: "btn",
          name: "教员名称:",
          val: "",
        },
      ],
      colDataList: [
        {
          label: "日期",
          prop: "data",
        },
        {
          label: "节次",
          prop: "Section",
        },
        {
          label: "系",
          prop: "system",
        },
        {
          label: "教研室",
          prop: "research",
        },
        {
          label: "考试课程",
          prop: "course",
        },
        {
          label: "授课教员",
          prop: "instructor",
        },
        {
          label: "考试类型",
          prop: "examinationType",
        },
        {
          label: "考试方式",
          prop: "method",
        },
        {
          label: "队别",
          prop: "belongs",
        },
        {
          label: "级次",
          prop: "Level",
        },
        {
          label: "专业班次",
          prop: "Professional",
        },
        {
          label: "人数",
          prop: "Number",
        },
        {
          label: "考场",
          prop: "room",
        },
        {
          label: "监考员",
          prop: "proctor",
        },
        {
          label: "备注",
          prop: "remarks",
        },
      ],
      dataList: [
        {
          id: "111",
          data: "2021-10-25",
          Section: "1，2，3",
          system: "计算机系",
          research: "教研室1",
          course: "计算机语言",
          instructor: "李教员*",
          examinationType: "机试",
          method: "笔试",
          belongs: "1队",
          Level: "2020级",
          Professional: "一班",
          Number: "50",
          room: "考场一",
          proctor: "李教员",
          remarks: "",
        },
        {
          id: "111",
          data: "2021-10-25",
          Section: "1，2，3",
          system: "计算机系",
          research: "教研室1",
          course: "计算机语言",
          instructor: "李教员*",
          examinationType: "机试",
          method: "笔试",
          belongs: "1队",
          Level: "2020级",
          Professional: "一班",
          Number: "50",
          room: "考场一",
          proctor: "李教员",
          remarks: "",
        },
      ],
      record: 0,

      setName: "",
    };
  },
  created() {},
  mounted() {},
  methods: {
    choiceLink(index) {
      this.record = index;
    },
  },
  computed: {}, //计算属性
};
</script>

<style lang="less" scoped>
@import "../../../styles/supervision.less";

.wrapper-container {
  width: 1711px;
  margin: 0 auto;
}

/deep/ .table-container {
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.wrapper-container .search-container .search-container-left {
  flex-wrap: wrap;
  .search-container-item {
    width: 12%;
    margin-right: 0px;
    .box {
      > span {
        text-align: left;
      }
      display: flex;
      justify-content: space-evenly;
      margin-bottom: 20px;
      align-items: center;
    }
  }
}

/deep/.el-date-editor.el-input {
  width: 110px;
}
/deep/ .el-input--medium {
  width: 110px;
  .el-input__inner {
    height: 28px;
    width: 110px;
    padding: 0px 18px;
  }
}
/deep/ .el-table thead {
  color: #004ca7 !important;
}

.btn {
  margin-top: 271px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 271px;
  .submit {
    width: 84px;
    height: 27px;
    line-height: 8px;
  }
}
.bottom-block {
  display: flex;
  flex-direction: row;
  justify-content: space-between !important;
  .export-button {
    width: 127px;
    height: 27px;
    background: #fff6ef;
    border: 1px solid #f3b815;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    > img {
      width: 17px;
      height: 17px;
    }
    > span {
      margin-left: 12px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }
  }
  .text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 39px;
    color: #004ca7;
  }
}
</style>
